import React, { useState } from "react";

import clsx from "clsx";
import { useTranslation } from "react-i18next";

import Card from "@material-ui/core/Card";
import Button from "@material-ui/core/Button";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";

import BankAccountItem from "./components/BankAccountItem";
import CardAccountItem from "./components/CardAccountItem";

export default function BankAccounts(props: any) {
  const { t } = useTranslation();

  const [activeTab, setActiveTab] = useState("2");

  const toggle = (tab: string) => {
    if (activeTab !== tab) setActiveTab(tab);
  };

  return (
    <>
      <Card className="card-bank-container">
        <List className=" nav-line justify-content-left d-flex nav-line-alt nav-tabs-primary header-tabs ">
          <ListItem
            button
            disableRipple
            className="px-4 py-2"
            selected={activeTab === "1"}
            onClick={() => {
              toggle("1");
            }}
          >
            <span className="font-weight-bold text-uppercase">
              {t("dashboard:cards")}
            </span>
            <div className="divider" />
          </ListItem>
          <ListItem
            button
            disableRipple
            className="py-4  bank-accounts-btn"
            selected={activeTab === "2"}
            onClick={() => {
              toggle("2");
            }}
          >
            <span className="font-weight-bold text-uppercase ">
              {t("dashboard:bank_accounts")}
            </span>

            <div className="divider" />
          </ListItem>

          <Button
            variant="text"
            color="primary"
            size="large"
            className="view-all-btn  "
          >
            <span className="font-size-xl text-right">
              {t("buttons:view_all")}
            </span>
          </Button>
        </List>
        <div className="p-4 box-content">
          <div
            className={clsx("tab-item-wrapper overflow-visible", {
              active: activeTab === "1",
            })}
          >
            <div className="card-accounts-container">
              <CardAccountItem
                isCardVerified={true}
                cardType={"wu"}
                cardShaba={"IR5000024331000174703"}
              />
              <CardAccountItem
                isCardVerified={true}
                cardType={"wu"}
                cardShaba={"IR5000024331000174703"}
              />
              <CardAccountItem
                isCardVerified={false}
                cardType={"wu"}
                cardShaba={"IR5000024331000174703"}
              />
              <Button
                size="large"
                variant="outlined"
                className=" font-weight-bold account-btn"
              >
                {t("buttons:add_new_card")}
              </Button>
            </div>
          </div>

          <div
            className={clsx("tab-item-wrapper", { active: activeTab === "2" })}
          >
            <List className="bank-accounts-container">
              <BankAccountItem
                isCardVerified={true}
                accountType={"paypal"}
                cardNumber={"5041-5648-9521-5687"}
              />
              <BankAccountItem
                isCardVerified={true}
                accountType={"mastercard"}
                cardNumber={"5041-5648-9521-5687"}
              />
              <BankAccountItem
                isCardVerified={false}
                accountType={"wu"}
                cardNumber={"5041-5648-9521-5687"}
              />
              <Button
                size="large"
                variant="outlined"
                className=" font-weight-bold account-btn"
              >
                {t("buttons:view_all_account")}
              </Button>
            </List>
          </div>
        </div>
      </Card>
    </>
  );
}
